<template>
    <div id="student_home">
        <!-- 今日工作 -->
        <div class="today-job-card">
            <el-card>
                <template #header>
                    <div class="flex justify-between items-center">
                        <span>今日工作</span>
                        <!-- <el-button v-if="todayJob" type="primary" @click="viewJobDetail">查看详情</el-button> -->
                    </div>
                </template>

                <div class="today-job-content">
                    <template v-if="todayJob && todayJob.title">

                        <div class="job-title">工作标题：{{ todayJob.title }}</div>
                        <div class="job-publisher">发布人：{{ todayJob.userName }}</div>
                        <div class="job-description">职位描述：{{ todayJob.description }}</div>

                        <template v-if="!isFinished">
                            <el-button type="success" @click="togglePunch">
                                {{ isPunchedIn ? '下班打卡' : '上班打卡' }}
                            </el-button>
                        </template>
                        <template v-else>
                            <div class="completed-text">今日工作已完成</div>
                        </template>
                    </template>

                    <template v-else>
                        <el-empty description="今日无工作安排" />
                    </template>
                </div>

            </el-card>
        </div>



        <!-- 状态卡 -->
        <div labor_job_status_cards>
            <el-card>
                <div class="labor_job_status_cards_content">
                    <el-row :gutter="250">
                        <el-col :span="8">
                            <el-card class="status-card pending_review">
                                <div class="card-content">
                                    <el-text class="number" tag="p">
                                        {{ statusCard.reviewed }}
                                    </el-text>
                                    <el-text class="text" tag="p">已接取</el-text>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card class="status-card applied">
                                <div class="card-content">
                                    <el-text class="number" tag="p">{{
                                        statusCard.inHand
                                        }}</el-text>
                                    <el-text class="text" tag="p">经行中</el-text>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card class="status-card in_progress">
                                <div class="card-content">
                                    <el-text class="number" tag="p">{{
                                        statusCard.completed
                                        }}</el-text>
                                    <el-text class="text" tag="p">已完成</el-text>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
        </div>

        <!-- 公告栏 -->
        <div class="labor_notice">
            <el-card>
                <el-carousel :interval="4000" type="card" height="200px">
                    <el-carousel-item v-for="(item, index) in announcements" :key="index">
                        <div class="announcement-item">
                            <h3 class="title">{{ item.title }}</h3>
                            <p class="content">{{ item.detaile }}</p>
                            <p class="date">
                                {{ timeFormat(item.publishTime) }}
                            </p>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </el-card>
        </div>

        <!-- 图表 -->
        <div class="labor_chart">
            <el-card>
                <div class="labor_chart_main">
                    <div ref="chartContainer" class="chartContainer"></div>
                </div>
            </el-card>
        </div>

    </div>
</template>

<script setup lang="ts">
import useHome from '@/hooks/student/useHome';
import { onMounted, ref, nextTick, onBeforeUnmount, watch } from "vue";
import * as charts from "echarts";
import useTimeFormat from "@/tool/format/timeFormat";
const { timeFormat } = useTimeFormat();

const {
    getStudentWorks,
    statusCardInit,
    getannouncements,
    countWorks,
    jobIsInWork,
    togglePunch,
    REQ_getTodayJob,
    isFinished,
    isPunchedIn,
    todayJob,
    statusCard,
    ChartData,
    source,
    works,
    announcements
} = useHome();

// 创建一个 ref 引用 DOM 元素
const chartContainer = ref<HTMLDivElement | null>(null);
let myChart: charts.ECharts | null = null;

const initChart = () => {
    if (chartContainer.value) {
        myChart = charts.init(chartContainer.value);

        const option: charts.EChartsOption = {
            title: {
                text: "本周详情",
                left: "10%",
            },
            legend: {},
            tooltip: {},
            dataset: {
                dimensions: ChartData.value.dimensions,
                source: ChartData.value.source,
            },
            xAxis: {
                type: "value", // X轴为数值轴
            },
            yAxis: {
                inverse: true,
                type: "category",
            },
            series: [
                {
                    type: "bar",
                },
                {
                    type: "bar",
                },
                {
                    type: "bar",
                },
            ],
            grid: {
                //修改图表位置
                // top:"20%"
            },
        };

        myChart.setOption(option);
    }
};

//更新chart数据
const updateChart = () => {
    if (myChart) {
        myChart.setOption({
            dataset: {
                dimensions: ChartData.value.dimensions,
                source: ChartData.value.source,
            },
        });
    }
};
//监听数据

watch(
    works,
    () => {

        statusCardInit();
        initChart();
        countWorks(works.value);
        nextTick(() => {
            updateChart()
        })
        console.log("source-watch", ChartData.value.source);
    },
    { deep: true }
);



// 初始化图表
onMounted(() => {
    nextTick(() => {
        jobIsInWork();
        initChart();
        getStudentWorks();
        getannouncements();
        REQ_getTodayJob();
    });
});

// 响应式调整
const handleResize = () => {
    myChart?.resize();
};

// 监听窗口大小变化
onMounted(() => {
    window.addEventListener("resize", handleResize);
});

onBeforeUnmount(() => {
    window.removeEventListener("resize", handleResize);
});
</script>


<style scoped>
/* =====界面全部====================================================================== */
.labor_home {
    overflow: auto;
}


/* 今日工作 */
.today-job-card {
    margin-top: 20px;
}

.today-job-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.job-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.today-job-content .job-title,
.today-job-content .job-publisher,
.today-job-content .job-description {
    font-size: 14px;
    color: #333;
    margin-bottom: 6px;
}


/* =====状态栏部分====================================================================== */
.labor_job_status_cards_content {
    padding: 5px 50px;
}

/* 卡片样式 */
.status-card {
    text-align: center;
    /* 居中对齐 */
    padding: 20px;
}

/* 内容布局 */
.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 数字部分 */
.number {
    font-size: 36px;
    /* 变大 */
    font-weight: bold;
    /* 加粗 */
    color: #333;
}

/* 文字部分 */
.text {
    font-size: 24px;
    /* 比数字稍小 */
    color: #666;
}

/* =====公告====================================================================== */
.labor_notice {
    margin-top: 10px;
    /* margin-bottom: 10px; */
}

.announcement-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 15px;
    /* background: #ffffff; */
    border-radius: 4%;
    text-align: center;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
}

.title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.content {
    font-size: 14px;
    margin: 10px 0;
    color: #666;
}

.date {
    font-size: 12px;
    color: #999;
}

.el-carousel__item:nth-child(2n) {
    background-color: #f1f1f1;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #ebebeb;
}

/* =====图表部分====================================================================== */
.labor_chart {
    margin-top: 20px;
}

.chartContainer {
    margin-top: 30px;
    height: 550px;
}

.labor_chart_main {
    padding: 10px 0px;
}

.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
